{%- capture crop_class -%}
  {% if theme_config.global.product_size != '0' %}product_card-picture-crop-{{theme_config.global.product_size}}{% endif %}
{%- endcapture -%}

{%- capture hover_class -%}
  {% if theme_config.global.product_move_two %}
    {% if product.images[1].src %}animation-hover{% endif %}
  {% endif %}
{%- endcapture -%}


{%- capture product_handle -%}
  {% if product.handle and product.handle != "" %}
    {%- if storeConfig.collection_product_url == 1 -%}
      /products/{{ product.handle }}?data_from={{product.data_from | default:data_from}}
    {%- else -%}
      {%- if collection_handle and collection_handle != "" -%}/collections/{{collection_handle}}{% endif %}/products/{{ product.handle }}?data_from={{product.data_from | default:data_from}}
    {%- endif -%}
  {% else %}
    javascript:;
  {%- endif -%}
{%- endcapture -%}

{%- capture product_alt -%}
  {%- if product.image.alt == "" -%}
    {{ product.title }}
  {%- else -%}
    {{ product.image.alt }}
  {%- endif -%}
{%- endcapture -%}

{%- capture text_ellipsis -%}
  {%- if theme_config.global.product_title_style == 'hide' -%}
    text-ellipsis
  {%- elsif theme_config.global.product_title_style == 'hide2' -%}
    text-ellipsis2
  {%- endif -%}
{%- endcapture -%}

<div class="collection_item public_radius overflow-hidden">
  <div>
    <a class="collection-product-item {{crop_class}} {{hover_class}} plugin-product_item-img_box" href="{{product_handle}}" alt="{{product_alt}}">
      {% include 'lazy_img', src: product.src, class: 'collection-product-item-image default_img main-image', alt: product_alt %}
      {% if theme_config.global.product_move_two and product.images[1].src  %}
        {% include 'lazy_img', src: product.images[1].src, class: 'collection-product-item-image hover-two', alt: product_alt %}
      {% endif %}


      {% if theme_config.global.product_discount_label and product.variant.price > 0 %}
        {% if product.variant.price < product.variant.compare_at_price %}
          {% assign price = product.variant.compare_at_price | minus: product.variant.price | divided_by: product.variant.compare_at_price | times: 100 | floor %}
          {% if price > 0 %}
            <div class="discount_tag {{ theme_config.global.discount_label_style }}">
              <div class="discount_tag_graphics"></div>
              <div class="discount_tag_name">{{ price }}%
                <span>OFF</span>
              </div>
            </div>
          {% endif %}
        {% endif %}
      {% endif %}

      {%- if product.available == 0 -%}
        <div class="product_card_soldout">{{ lang.general.sold_out }}</div>
      {%- endif -%}

      {%- if theme_config.global.product_preview -%}
        <div class="actions-wrapper">
          <div class="actions-wrapper-btn product_view btn_anime" data-handle="{{ product.handle }}" data-from="{{data_from}}">
            <svg width="18" height="18" viewBox="0 0 26 26" aria-hidden="true"><g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke="currentColor"><circle cx="10.364" cy="10.364" r="10.364"></circle><path stroke-linecap="square" d="m18 18 5.777 5.788"></path></g></g></svg>
          </div>
        </div>
      {%- endif -%}

    </a>
    <div class="item-caption">
      <div>
        <a class="item-caption-title {{text_ellipsis}} {% unless theme_config.global.product_title_model %}product_card-wap-name{% endunless %}" href="{{product_handle}}">{{ product.highlight_title | default : product.title | default:"Title" }}</a>
      </div>
      <div class="item-caption-price">
        {% if product.variant.price < 0 %}
          <span class="general-price">{{ "88.88" | money }}</span>
        {% else %}
          <span class="general-price">{{ product.variant.price | money }}</span>
        {% endif %}
        {% if product.variant.compare_at_price != "0" and  product.variant.price < product.variant.compare_at_price %}
          <span class="general-oldprice">{{ product.variant.compare_at_price | default : "88.88" | money }}</span>
        {% endif %}
      </div>
      {% if theme_config.global.product_discount_label_style_switch and product.variant.price > 0 %}
        {% if product.variant.price < product.variant.compare_at_price %}
          <div class="product_price" style='color:var(--discount_tag_bg);'>
            {{lang.general.save}}
            {% if theme_config.global.product_discount_label_style == 2 %}
              {% assign price = product.variant.compare_at_price | minus: product.variant.price | divided_by: product.variant.compare_at_price | times: 100 | floor %}
              {{price}}%
            {% else %}
              {% assign price = product.variant.compare_at_price | minus: product.variant.price | round: 2  %}
              {{price | money}}
            {% endif %}
          </div>
        {% endif %}
      {% endif %}
      {% if star_algin == 'left' %}
        {% assign starAlgin = "margin-top:10px;justify-content:flex-start !important;" %}
      {% elsif star_algin == 'right' %}
        {% assign starAlgin = "margin-top:10px;justify-content:flex-end !important;" %}
      {% elsif star_algin == 'center' %}
        {% assign starAlgin = "margin-top:10px;justify-content:center !important;" %}
      {% else %}
        {% assign starAlgin = "margin-top:10px;" %}
      {% endif %}
      {% include 'comment_star', class: "product-info-star", score:product.star, style: starAlgin %}
    </div>
    {% if theme_config.global.product_img_list_type != 0 %}
      <div class="block_product_img_list noRender">
        <div class="img_list" style="display: flex;justify-content: center;flex-wrap: wrap;">
          {% if theme_config.global.product_img_list_type == "1" %}
            {% assign colorOptions = theme_config.global.product_sku_options | join: ',' | downcase | split: ',' %}
            {% assign isFindSuccess = false %}
            {% if product.variants.size > 0 %}
              {% for option in product.options %}
                {% assign option_name = option.name | downcase %}
                {% assign hasOptionName = option_name | in_array: colorOptions %}
                {% if hasOptionName and isFindSuccess == false %}
                  {% assign isFindSuccess = true %}
                  {% assign optionIndex = option.position | plus: 1 %}
                  {% assign optionTitle = "option" | append: optionIndex | append: "_title" %}
                  {% assign optionValueTitle = "option" | append: optionIndex | append: "_value_title" %}
                  {% assign optionValues = "" %}
                  {% assign isSelectOptions = "" %}

                  {% for optionValueItem in option.values %}
                    {% assign optionValues = optionValues | append: optionValueItem.option_value | append: ',' %}
                  {% endfor %}
                  {% for variant in product.variants %}
                    {% assign varinatTitle = variant | getArrayValueByKey: optionTitle | downcase %}
                    {% assign variantValue = variant | getArrayValueByKey: optionValueTitle | downcase %}
                    {% assign hasVarinatTitle = colorOptions contains varinatTitle %}
                    {% assign hasValue = optionValues contains variantValue %}

                    {% if hasVarinatTitle != '' and  hasValue != '' %}
                      {% unless isSelectOptions contains variantValue %}
                        {% if variant.image %}
                          {% assign isSelectOptions = isSelectOptions | append: variantValue | append: ',' %}
                          <a href="{{ product_handle | append: "&variant_sku_code=" | append: variant.sku_code }}" class="img_list_item"><img data-src="{{variant.image.src}}"  src="{{ 'empty_loading.png' | public_asset_abs_url }}"></a>
                        {% endif %}
                      {% endunless %}
                    {% endif %}
                  {% endfor %}

                {% endif %}
              {% endfor %}
            {% endif %}

          {% elsif theme_config.global.product_img_list_type == "2" %}
            {% if product.variants.size > 0 %}
              {% for imgsItem in product.images %}
                <a href="{{ product_handle }}" class="img_list_item"><img data-src="{{imgsItem.src}}"  src="{{ 'empty_loading.png' | public_asset_abs_url }}"></a>
              {% endfor %}
            {% endif %}
          {% endif %}
          <div class="morNumber"></div>
        </div>
      </div>
    {% endif %}
  </div>
</div>